<template>
  <div class="tab">
      <!-- 导航 -->
      <Item v-for="v in bar" :key='v.txt' :who='who' :setopt="v" />
  </div>
</template>

<script>
import Item from "./Item.vue"
export default {
    data () {
        return {
            bar:[
                {txt:'微信',iconac:"static/img/1.png",iconde:"static/img/2.png"},
                {txt:'通讯录',iconac:"static/img/3.png",iconde:"static/img/2.png"},
                {txt:'发现',iconac:"static/img/5.png",iconde:"static/img/2.png"},
                {txt:'我',iconac:"static/img/7.png",iconde:"static/img/2.png"},
            ],
            who:"微信",// 默认微信高亮
        }
    },
   components:{
       Item
   }
}
</script>

<style>
  .tab{
      width: 100%;
      height: 50px;
      position: fixed;
      bottom: 0;
      left: 0;
      border-top: 1px solid gainsboro;
      display: flex;
      justify-content: space-around;
  }
</style>